import dayjs from "dayjs";
// import editForm from "../form.vue";
import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import { ElMessageBox } from "element-plus";
import { addDialog } from "@/components/ReDialog";
import type { FormItemProps } from "./types";
import type { PaginationProps } from "@pureadmin/table";
import { getKeyList, deviceDetection } from "@pureadmin/utils";
import { queryAuthPolicy } from "@/api/authorization";
import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
import { useRouter } from "vue-router";

export function useRole(treeRef: Ref) {
  const form = reactive({
    authType: "1",
    policyName: "",
    authPosition: "",
    applicationName: "",
    role: "",
    functionPermission: "",
    groupName: "",
    createdDate: "",
    updatedDate: "",
    vaildStatus: "",
    page: 1,
    pageSize: 10
  });
  const curRow = ref();
  const formRef = ref();
  const dataList = ref([]);
  const treeIds = ref([]);
  // const loading = ref(true);
  const router = useRouter();
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  const columns: TableColumnList = [
    {
      label: "授权类型",
      prop: "authType"
    },
    {
      label: "策略名称",
      prop: "policyName"
    },
    {
      label: "授权岗位",
      prop: "authPosition"
    },
    {
      label: "应该系统",
      prop: "applicationName"
    },
    {
      label: "角色",
      prop: "role"
    },
    {
      label: "功能权限",
      prop: "functionPermission"
    },
    {
      label: "所在群组",
      prop: "groupName"
    },
    {
      label: "创建时间",
      prop: "createdDate"
    },
    {
      label: "修改时间",
      prop: "updatedDate"
    },
    {
      label: "状态(是否有效)",
      prop: "vaildStatus"
    },
    {
      label: "操作",
      fixed: "right",
      width: 180,
      slot: "operation"
    }
  ];



  function handleDelete(row) {
    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
    onSearch();
  }

  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
  }

  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
  }

  async function onSearch() {
    // loading.value = true;
    let formData = {
      "saaAuthorizationPoliciesVo" :toRaw(form)
    }
    // const { data } = await queryAuthPolicy(formData);
    // dataList.value = data.list;
    dataList.value = [
      {
        "authType": "1",
        "policyName": "",
        "authPosition": "",
        "applicationName": "",
        "role": "",
        "functionPermission": "",
        "groupName": "",
        "createdDate": "",
        "updatedDate": "",
        "vaildStatus": "",
        "page": 1,
        "pageSize": 10
    }
    ]
    // pagination.total = data.total;
    // pagination.pageSize = data.pageSize;
    // pagination.currentPage = data.currentPage;

    // setTimeout(() => {
    //   loading.value = false;
    // }, 500);
  }

  function openDialog(title = "新增", row?: FormItemProps) {
    router.push({
      path: "/authorization-policy/add",
    });
    // addDialog({
    //   title: `${title}角色`,
    //   props: {
    //     formInline: {
    //       name: row?.name ?? "",
    //       code: row?.code ?? "",
    //       remark: row?.remark ?? ""
    //     }
    //   },
    //   width: "40%",
    //   draggable: true,
    //   fullscreen: deviceDetection(),
    //   fullscreenIcon: true,
    //   closeOnClickModal: false,
    //   contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
    //   beforeSure: (done, { options }) => {
    //     const FormRef = formRef.value.getRef();
    //     const curData = options.props.formInline as FormItemProps;
    //     function chores() {
    //       message(`您${title}了角色名称为${curData.name}的这条数据`, {
    //         type: "success"
    //       });
    //       done(); 
    //       onSearch();
    //     }
    //     FormRef.validate(valid => {
    //       if (valid) {
    //         if (title === "新增") {
    //           chores();
    //         } else {
    //           chores();
    //         }
    //       }
    //     });
    //   }
    // });
  }

  /** 高亮当前权限选中行 */
  function rowStyle({ row: { id } }) {
    return {
      cursor: "pointer",
      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
    };
  }

  onMounted(async () => {
    onSearch();
    // const { data } = await queryAuthPolicy();
    // treeIds.value = getKeyList(data, "id");
  });

  return {
    form,
    curRow,
    // loading,
    columns,
    rowStyle,
    dataList,
    pagination,
    onSearch,
    openDialog,
    handleDelete,
    handleSizeChange,
    handleCurrentChange,
  };
}